


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>promise.race方法</title>
</head>
<body>
    Promise.race()方法  谁先到执行谁
    <!-- 
       此方法和Promise.all()有很多相似的地方。
        该方法接收一个[数组]形式的promise，包装成一个新的 Promise 实例
        一旦数组中有一个promise被resolve或者reject就会立刻返回。
     -->

    <script>

        // // 创建了一个promise实例1
        // let p1 = new Promise((resolve,reject)=>{
        //     resolve("p1成功了")
        // })
        // let p2 = new Promise((resolve,reject)=>{
        //     resolve("p2成功了")
        // })
        // let p3 = new Promise((resolve,reject)=>{
        //     reject("p3失败了")
        // })
        // let p4 = new Promise((resolve,reject)=>{
        //     resolve("p4成功了")
        // })

        // Promise.race([p1,p2,p3,p4]).then(res=>{
        //     console.log(res);
            
        // }).catch(err=>{
        //     console.log("失败了"+err);
            
        // })
        

         //加载图片
   function loadImg(src) {
       return new Promise(function (resolve,reject) {
        //    创建img标签
           let img = document.createElement("img");
           img.src = src;
           img.onload=function(){
            resolve(img)
           }
           img.error=function(){
            reject(img)
           }
       })
   }
    //在页面中显示出来
    function showImg(imgs) {
       let p = document.createElement("p")
       p.appendChild(imgs)
       document.body.appendChild(p)
       
    }
    // function showImg(imgs) {
    //    console.log(imgs);
    //    imgs.forEach(function (img) {
    //     document.body.appendChild(img)
    //    })
    // //    p.appendChild(imgs)
    // //    document.body.appendChild(p)
       
    // }

    Promise.race([//    Promise.race  谁先来渲染谁   
    loadImg("https://img14.360buyimg.com/n4/s260x260_jfs/t4345/284/2534342556/119746/550dee37/58d34a9dNf0bd717f.jpg"),
    loadImg("https://img10.360buyimg.com/n4/s260x260_jfs/t3079/363/6070979658/42126/5b5c2f39/589af086N4a3bed39.jpg"),  
        loadImg("https://img13.360buyimg.com/n4/s260x260_jfs/t3259/170/5587914266/144572/64259fc5/5873347aN14e34822.jpg"),
    ]).then(showImg)

    </script>
</body>
</html>